<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>妙码生花</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 右上角菜单按钮 -->
    <div class="menu-toggle" id="menuToggle">
        <span></span>
        <span></span>
        <span></span>
    </div>

    <!-- 侧边菜单 -->
    <nav class="side-menu" id="sideMenu">
        <div class="menu-header">
            <h3>妙码生花</h3>
            <button class="close-btn" id="closeBtn">&times;</button>
        </div>
        <ul class="menu-items">
            <li><a href="#">首页</a></li>
            <li><a href="overview.html">妙码概览</a></li>
            <li><a href="#">文档</a></li>
            <li><a href="#">示例</a></li>
            <li><a href="#">关于</a></li>
        </ul>
    </nav>

    <!-- 遮罩层 -->
    <div class="overlay" id="overlay"></div>

    <!-- 主要内容 -->
    <main class="main-content">
        <div class="hero-section">
            <h1 class="hero-title">妙码生花</h1>
            <p class="hero-subtitle">AI驱动的全栈代码自动生成工具</p>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="footer-content">
            <p>&copy; 2025 妙码生花. <a href="https://miaoma.com" target="_blank">miaoma.com</a> All Rights Reserved.</p>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>